<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>采购申请</title>
    <%@include file="/comm/head.jsp"%>

</head>
<body>
<div id="root">
    <card>
<shiro:hasPermission name="cgsq:add">
        <i-button type="primary" icon="ios-search"  @click="toCai">采购申请</i-button>
</shiro:hasPermission>
    </card>
    <i-table :columns="columns" :data="pageResult.rows"  :height="400" border stripe @on-row-dblclick="rowClick" @on-selection-change="tableSelection=arguments[0]">
        <template slot-scope="{row}" slot="type">
            <span>{{row.type==1?"采购":"销售"}}</span>
        </template>

        <template  slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未审核":(row.state==1?"已审核":(row.state==2?"已确认":"已入库"))}}</span>
        </template>
        <template  slot-scope="{row}" slot="stat">
            <span>{{row.stat==4?"审核驳回":(row.stat==5?"确认驳回":(row.stat==6?"入库驳回":" ")   )}}</span>
        </template>
    </i-table>
   <modal v-model="addFlag" title="增加订单" :width="800" >
        <i-form  >
            <form-item label="供应商:">
                <i-select v-model="order.providerId"style="width: 250px" @on-change="gyschange" filterable>
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
        </i-form>

                <div style="margin-top: -5px;">
                    <span style="font:16px bolder ">采购订单-商品列表</span>
                    <hr>
                </div>
                <i-button  type="primary" icon="ios-add-circle" @click="handleAdd">增加</i-button>
                <i-table  :columns="myColumns1" :data="mydata2" :height="300" border stripe >
                </i-table>

                <div slot="footer">
                    <i-button  type="success" @click="add" >提交</i-button >
                </div>
    </modal>
    <modal  v-model="OrderFlag" title="订单详请" width="700" :height="600">

        <div style="width: 660px;height: 200px ;border: 0.5px lightgray solid">
            <i-form :label-width="80" >
                <form-item label="流水号:"style=" margin-top: 5px;float: left;">
                    <i-input v-model="order.id" size="large" style="width: 110px;text-align: center"readonly/>
                </form-item>
                <form-item label="供应商:"style=" margin-top: 5px;float:left">
                    <i-input  style="width: 180px;text-align: center" v-model="order.providerIdName" size="large"readonly/>
                </form-item>

                <form-item label="状态:"style=" margin-top: 5px; float:left">
                    <i-select  v-model="order.state" style="width: 88px;background-color: #FFFFFF;"disabled="disabled" >
                        <i-option value="0" >未审核</i-option>
                        <i-option value="1">已审核</i-option>
                        <i-option value="2" >已确认</i-option>
                        <i-option value="3">已入库</i-option>

                    </i-select>
                    <!--     <i-input  style="width: 110px;text-align: center" v-model="order.state" size="large"readonly/>-->
                </form-item>
                <form-item label="下单员:"style=" margin-top: 70px; margin-left:-630px;float: left">
                    <i-input   style="width: 88px;text-align: center"v-model="order.creatorName" size="large"readonly/>
                </form-item>
                <form-item label="审核员:"style="  margin-top: 70px; margin-left:-458px;float: left">
                    <i-input   style="width: 88px;text-align: center"v-model="order.checkerName" size="large"readonly/>
                </form-item>
                <form-item label="采购员:"style="  margin-top: 70px; margin-left:-302px;float: left">
                    <i-input   style="width: 88px;text-align: center"v-model="order.purchaserName" size="large"readonly/>
                </form-item>
                <form-item label="库管员:"style=" margin-top: 70px; margin-left:-145px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.stockKeeperName" size="large"readonly/>
                </form-item>
                <form-item label="生成日期:" style="margin-top: 140px;margin-left:-650px;float: left">
                    <i-input  style="width: 88px;" v-model="order.createTime" size="large"readonly/>
                </form-item>
                <form-item label="审核日期:"style="margin-top: 140px;margin-left:-480px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.checkTime" size="large"readonly/>
                </form-item>
                <form-item label="采购日期:"style="margin-top: 140px;margin-left:-320px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.purchaseTime" size="large"readonly/>
                </form-item>
                <form-item label="出库日期:"style="margin-top: 140px;margin-left:-165px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.stockTime" size="large"readonly/>
                </form-item>


            </i-form>
        </div>
            </i-form>

        <i-table style="clear:both;" :columns="Columns1"  :data="mydata1" :height="200" border stripe >

            <template  slot-scope="{row}" slot="state">
                <span>{{row.state==1?"已出库":"未出库"}}</span>
            </template>
        </i-table>
        <div slot="footer">
            <i-button type="warning" icon="ios-chatboxes-outline"  @click="chaBoYuanYin">驳回原因</i-button>
            <i-button type="info" icon="ios-refresh" @click="chongCai">重新采购</i-button>
        </div>
        <modal  v-model="boCha" >
            <div slot="footer">
                <i-form :label-width="80" >
                    <form-item label="驳回原因：" style="size:18px">

                        <i-input  v-model="order.wayBillCode" type="textarea"  disabled></i-input>
                    </form-item>

                </i-form>
            </div>
        </modal>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%--@on-change="pageNo=arguments[0];search();"    :current.sync="pageNo"  @on-change="search"--%>
          @on-change="pageNo=arguments[0];search();"
          show-sizer
          :page-size-opts="[5,10,15]"

    <%--	@on-page-size-change切换每页条数时的回调，返回切换后的每页条数--%>
          @on-page-size-change="pageSize=arguments[0];search();"
    />
</div>
<script>

    new Vue({
        el:"#root",
        data: {
            columns: [
                {slot:"type",title:"类型",align:"center"},
                {title: "生成日期", key: "createTime",width:"119",align:"center"},
                {title: "审核日期", key: "checkTime",width:"119",align:"center"},
                {title: "开始日期", key: "purchaseTime",width:"119",align:"center"},
                {title: "结束日期", key: "stockTime",width:"119",align:"center"},
                {title: "下单员", key: "creatorName",align:"center"},
                {title: "审核员", key: "checkerName",align:"center"},
                {title: "采购员", key: "purchaserName",align:"center"},
                {title: "库管员", key: "stockKeeperName",align:"center"},
                {title: "供应商", key: "providerIdName",align:"center",width:"110"},
                {title: "合计金额", key: "totalMoney",align:"center"},
                {title: "订单状态", slot:"state",align:"center"},
                {title: "通过状态", slot:"stat",align:"center"}
            ],

            Columns1:[
                {title:"编号",key: "id",align:"center"},
                {title:"商品编号",key: "goodsId",align:"center",width:119},
                {title:"商品名称",key: "goodsName",align:"center",width:119},
                {title:"商品价格",key: "price",align:"center",width:119},
                {title:"数量",key: "num",align:"center"},
                {title:"金额 ",key: "money",align:"center"},
                {title:"状态",slot: "state",align:"center"},

            ],
            myColumns1: [
                {title: "商品编号",
                    key: "goodsId",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.goodsId=_this.mydata2[params.index].goodsId,
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        if(event.target.value==null){
                                            return _this.$Message.warning("编号不能为空")
                                        }
                                        params.row.goodsId = event.target.value;
                                        _this.mydata2[params.index].goodsId = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });
                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.goodsId);
                        }
                    }
                },
                {
                    title: "商品名称",
                    key:"goodsName",
                    width:"120",
                    render: (h, params) => {
                        return h('i-select', {
                                props: {
                                    filterable:"true",
                                },
                                on: {
                                    'on-change':(event) => {
                                        axios.get(`${ctx}/jibenxinxi/sp/list3?id=${event}`)
                                            .then(({data})=>{
                                                _this.goodsList2=data.result;
                                                _this.mydata2[params.index].goodsName=_this.goodsList2.name
                                                params.row.goodsName=_this.mydata2[params.index].goodsName
                                                _this.mydata2[params.index].goodsId= _this.goodsList2.id
                                                _this.mydata2[params.index].price=_this.goodsList2.sellingPrice
                                            });
                                    },
                                },
                            },
                            _this.goodsList1.map(function(type){//这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                                return h('Option', {
                                    props:{
                                        value:type.id,
                                        label:type.name,
                                    },
                                    style:{
                                        fontSize: '14px',
                                        cursor: 'pointer',
                                        color: 'blue',
                                    }
                                }, type);
                            })
                        )
                    },
                },
                {
                    title: "价格",
                    key: "price",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.price=_this.mydata2[params.index].price,
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.price = event.target.value;
                                        _this.mydata2[params.index].price = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });
                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.price);
                        }
                    }
                },
                {
                    title: "数量",
                    key: "num",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.num
                                },
                                on: {
                                    "on-blur": event => {
                                        if(event.target.value<0||event.target.value==null||event.target.value==0){
                                            return _this.$Message.warning("数量不能为空且必须大于零")
                                        }
                                        if(params.row.goodsName<0||params.row.goodsName==null||params.row.goodsName==0){
                                            return _this.$Message.warning("请选择商品")
                                        }
                                        params.row.num = event.target.value;
                                        _this.mydata2[params.index].num = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });

                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.num);
                        }

                    },
                },
                {
                    title: "金额",
                    key: "money",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.money=(params.row.num * params.row.price).toFixed(2),
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.money = event.target.value;
                                        _this.mydata2[params.index].money = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });

                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.money=(params.row.num * params.row.price).toFixed(2));
                        }

                    },
                },
                {
                    title: "操作",
                    key: "action",
                    width:80,
                    render: (h, params) => {
                        return h('div', [
                            h('i-Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    "click": (index, row) => {
                                        _this.mydata2.splice(index, 1)                                    }
                                }
                            }, '删除'),
                            h('i-Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        if (params.row.$isEdit) {
                                            if(params.row.num<0||params.row.num==null||params.row.num==0){
                                                return _this.$Message.warning("数量不能为空且必须大于零")
                                            }
                                            _this.handleSave(params.row)
                                        } else {
                                            if(params.row.goodsName<0||params.row.goodsName==null||params.row.goodsName==0){
                                                return _this.$Message.warning("请选择商品")
                                            }
                                            _this.handleEdit(params.row)
                                        }
                                    }
                                }
                            }, params.row.$isEdit ? '保存' : '编辑'),

                        ])}
                }
            ],
            $isEdit:[],
            pageResult:{
                rows:[],
                //rows1:[],
                total:50
            },
            addFlag:false,
            tableSelection:[],
            pageNo:1,
            myData:[],
            order:{
                orderDetail:[],
            },
            providerList:[],
            goodsList:[],
            goodsList1:[],
            goodsList2:[],
            pageSize:5,
            goodsListFlag:0,
            cgOrderVo:{
                type:1,
                stat:4,
                state:0,
                state1:0
            },
            mydata2:[],
            OrderFlag:false,
            mydata1:[],
            providerId:"",
            boCha:false,
        },
        mounted(){
            this.search();
            _this=this;
            this.mydata2=[];
            this.searchProviderList();
            this.searchGoodsList();

        }, methods:{
            search(){
                axios.get(`${ctx}/caigou/cgsq/search/${this.pageNo}/${this.pageSize}`,{params:this.cgOrderVo})
                    .then(({data})=>{
                            this.pageResult=data.result;
                    });
            },
            searchProviderList(){
                axios.get(`${ctx}/jibenxinxi/gys/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
            searchGoodsList(){
                axios.get(`${ctx}/jibenxinxi/sp/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
            toCai(){
                this.order={};
                this.mydata2=[];
                this.addFlag=true;
            },
            handleAdd() {
                if(this.order.providerId==null||this.order.providerId==0){
                    return this.$Message.error("请先选择供应商");
                }
                let row = {
                    num:"0",
                    money:"0",
                }
                this.mydata2.push(row)
            },
            add(){
                if(this.mydata2.length<1){
                    return this.$Message.error("商品信息不能为空")
                }
                this.order.orderDetail=this.mydata2
                axios.post(`${ctx}/caigou/cgddcx/add`,this.order)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });
            },
            rowClick(data1,index){//data 该行数据 ，index该行索引
                axios.get(`${ctx}/caigou/cgddcx/list?id=${data1.id}`)
                    .then(({data})=>{
                        this.mydata1=data.result;
                        Object.assign(this.order,data1);
                        this.OrderFlag=true
                    })},
            handleEdit (row) {
                this.$set(row, '$isEdit', true)

            },
            handleSave (row) {
                this.$set(row, '$isEdit', false)
            },
            gyschange(event){
                this.providerId=event
                axios.get(`${ctx}/jibenxinxi/sp/list2?providerId=${this.providerId}`)
                    .then(({data})=>{
                        this.goodsList1=data.result;
                    });
            },

            chaBoYuanYin(){
                this.boCha=true;
            },
            chongCai(data1){
                if(this.tableSelection.length!=1) {
                    iview.Modal.confirm({

                        title:"温馨提示",
                        content:"您确定要重新采购么？",
                        onOk: () => {
                            axios.get(`${ctx}/caigou/cgddcx/del?id=${this.order.id}`)
                                .then(({data})=>{
                                    this.xiang=false;
                                    this.search();
                                    this.toCai()
                                    this.OrderFlag=false
                                })
                        },
                        onCancel: () => {
                            this.$Message.info('您已取消');
                        }
                    });
                    return;
            }
            },
        }
    })
</script>
</body>
</html>
